<template>
  <task-container @menuItemClick="onMenuItemClick" @selectItemClick="onSelectItem" @setOperation="onSetOperation">
    <div class="c-box">
      <a-tabs default-active-key="1" @change="handleChange">
        <a-tab-pane key="1" tab="换机">
          <custom-table
            ref="table"
            rowKey="id"
            :showColSettings="false"
            :hideColSettings="['action']"
            :showAlert="false"
            :showSelection="false"
            :loading="loading1"
            :columns="columns1"
            :dataSource="pageData1"
            @change="onTableChange1"
            size="middle"
          >
          </custom-table>
        </a-tab-pane>
        <a-tab-pane key="2" tab="换卡" force-render>
          <custom-table
            ref="table"
            rowKey="id"
            :showColSettings="false"
            :hideColSettings="['action']"
            :showAlert="false"
            :showSelection="false"
            :loading="loading2"
            :columns="columns2"
            :dataSource="pageData2"
            @change="onTableChange2"
            size="middle"
          >
          </custom-table>
        </a-tab-pane>
        <a-button
          slot="tabBarExtraContent"
          @click="onUpdate"
          :loading="btnLoading"
          :disabled="idDisabled"
          v-if="isOperation"
        >
          更新数据
        </a-button>
      </a-tabs>
    </div>
  </task-container>
</template>
<script>
import taskContainer from '../modules/taskContainer'
import CustomTable from '@/components/zxd/Table/CustomTable'
import * as api from '@/api/wxSmuggle/eventModel.js'
export default {
  components: {
    taskContainer,
    CustomTable
  },
  data() {
    return {
      idDisabled: true,
      loading1: false,
      pageFilter1: {
        pageNo: 1,
        pageSize: 10
      },
      columns1: [
        {
          title: '序号',
          dataIndex: 'order',
          scopedSlots: { customRender: 'order' },
          align: 'center',
          width: 60,
          customRender: (text, record, index) =>
            `${(this.pageFilter1.pageNo - 1) * this.pageFilter1.pageSize + (index + 1)}` //序号分页后连续
        },
        {
          title: '旧机IMEI',
          dataIndex: 'oldImei'
        },
        {
          title: '新机IMEI',
          dataIndex: 'newImei'
        },
        {
          title: '更换时间',
          dataIndex: 'changeTime'
        }
      ],
      pageData1: [],
      loading2: false,
      pageFilter2: {
        pageNo: 1,
        pageSize: 10
      },
      columns2: [
        {
          title: '序号',
          dataIndex: 'key',
          width: 60
        },
        {
          title: '旧卡IMSI',
          dataIndex: 'oldImsi'
        },
        {
          title: '新卡IMSI',
          dataIndex: 'newImsi'
        },
        {
          title: '新卡手机号',
          dataIndex: 'newMsisdn'
        },
        {
          title: '更换时间',
          dataIndex: 'changeTime'
        }
      ],
      pageData2: [],
      tabIndex: 1,
      isOperation: true,
      btnLoading: false
    }
  },
  mounted() {},
  methods: {
    // 点击左边任务
    onMenuItemClick(id) {
      // console.log("id")
      // console.log(id)
      this.pageFilter1.incidentTaskId = id
      this.pageFilter2.incidentTaskId = id
    },
    // 点击目标人员
    onSelectItem(item) {
      // console.log("item.taskId")
      // console.log(item.taskId)
      this.pageFilter1.msisdn = item.phoneNumber
      this.pageFilter2.msisdn = item.phoneNumber
      if (this.tabIndex == 1) {
        this.refreshTable1() //换机
      } else {
        this.refreshTable2() //换卡
      }
    },
    onSetOperation(isOperation) {
      this.isOperation = isOperation
    },
    handleChange(val) {
      console.log(val)
      this.tabIndex = val
      if (val == 1) {
        this.refreshTable1() //换机
      } else {
        this.refreshTable2() //换卡
      }
    },
    refreshTable1() {
      this.loading1 = true
      api
        .changeImeiList(this.pageFilter1)
        .then(res => {
          if (res.success) {
            if (res.result != null) {
              this.pageData1 = res.result
            } else {
              this.pageData1 = []
            }
            this.loading1 = false
            this.idDisabled = false
          } else {
            this.$message.warning(res.message)
            this.loading1 = false
          }
        })
        .catch(e => {
          this.loading1 = false
          this.$message.warn('请求失败！')
        })
    },
    refreshTable2() {
      this.loading2 = true
      api
        .changeImsiList(this.pageFilter2)
        .then(res => {
          if (res.success) {
            if (res.result != null) {
              this.pageData2 = res.result
            } else {
              this.pageData2 = []
            }
            this.loading2 = false
            this.idDisabled = false
            // this.$refs.table.onClearRowKeys()
          } else {
            this.$message.warning(res.message)
            this.loading2 = false
          }
        })
        .catch(e => {
          this.loading2 = false
          this.$message.warn('请求失败！')
        })
    },
    onUpdate() {
      this.btnLoading = true
      if (this.tabIndex == 1) {
        //换机更新
        let params = { msisdn: this.pageFilter1.msisdn, incidentTaskId: this.pageFilter1.incidentTaskId }
        api
          .changeImeiDoFetch(params)
          .then(res => {
            if (res.success) {
              let n = res.result
              //n秒后自动刷新列表数据
              if (n >= 0) {
                let _this = this
                setTimeout(() => {
                  _this.$message.success('更新成功！')
                  _this.btnLoading = false
                  _this.refreshTable1()
                }, n * 1000)
              }
            } else {
              this.btnLoading = false
              this.$message.warn('更新失败！')
            }
          })
          .catch(e => {
            this.btnLoading = false
            this.$message.warn('更新失败！')
          })
      } else {
        //换卡更新
        let params = { msisdn: this.pageFilter2.msisdn, incidentTaskId: this.pageFilter2.incidentTaskId }
        api
          .changeImsiDoFetch(params)
          .then(res => {
            if (res.success) {
              let n = res.result
              //n秒后自动刷新列表数据
              if (n >= 0) {
                let _this = this
                setTimeout(() => {
                  _this.$message.success('更新成功！')
                  _this.btnLoading = false
                  _this.refreshTable2()
                }, n * 1000)
              }
            } else {
              this.btnLoading = false
              this.$message.warn('更新失败！')
            }
          })
          .catch(e => {
            this.btnLoading = false
            this.$message.warn('请求失败！')
          })
      }
    },
    onTableChange1(pagination, pageFilter, sorter) {
      let keyMap = { currentPage: 'pageNo' }
      let paginations = Object.keys(pagination).reduce((newData, key) => {
        let newKey = keyMap[key] || key
        newData[newKey] = pagination[key]
        return newData
      }, {})
      this.pageFilter1 = Object.assign({}, this.pageFilter1, paginations)
      this.refreshTable1()
    },
    onTableChange2(pagination, pageFilter, sorter) {
      let keyMap = { currentPage: 'pageNo' }
      let paginations = Object.keys(pagination).reduce((newData, key) => {
        let newKey = keyMap[key] || key
        newData[newKey] = pagination[key]
        return newData
      }, {})
      this.pageFilter2 = Object.assign({}, this.pageFilter2, paginations)
      this.refreshTable2()
    }
  }
}
</script>
<style lang="less" scoped>
/deep/.menuBox {
  height: auto;
}
</style>
